<!--填报课程考核实施计划-->
<template>
  <div class="paperprint-container">
    <div class="search-container">
      <div class="search-container-left">
        <div class="search-container-item">
          <span>学期：</span>
          <el-select
            v-model="xq"
            style="width: 91px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in xqList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>培养层次：</span>
          <el-select
            v-model="level"
            style="width: 80px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in ppccList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>修习类型：</span>
          <el-select
            v-model="xxtype"
            style="width: 80px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in xxlxList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>课程名称：</span>
          <el-input
            style="width: 152px"
            size="mini"
            placeholder="请输入课程名称"
            v-model="course"
          ></el-input>
        </div>
        <div class="search-container-item">
          <span>课程负责人：</span>
          <el-input
            style="width: 152px"
            size="mini"
            placeholder="请输入课程负责人"
            v-model="coursecharge"
          ></el-input>

        </div>
        <div class="search-button" @click="querySelPrint">
          <img src="../../../assets/assessment/icon-search.png" alt=""/>
          <span>查询</span>
        </div>
      </div>
      <div class="search-container-right">
        <div class="export-button">
          <img src="../../../assets/assessment/icon-print.png" alt=""/>
          <span>打印</span>
        </div>
        <div class="add-button">
          <img src="../../../assets/assessment/icon-export.png" alt=""/>
          <span @click="exportClick">导出</span>
        </div>
      </div>
    </div>

    <div class="table-container">
      <div class="table-header">
        <div class="item" style="width: 67px">
          <el-checkbox
            v-model="rowColumnChecked"
            @change="selectCheck('all')"
          ></el-checkbox>
        </div>
        <div class="item" style="width: 97px">课程编号</div>
        <div class="item" style="width: 106px">课程名称</div>
        <div class="item" style="width: 114px">课程负责人</div>
        <div class="item" style="width: 123px">
          <el-checkbox
            v-model="sjcfmColumnChecked"
            @change="selectCheck('sjcfm')"
          ></el-checkbox
          >
          <span>试卷册封面</span>
        </div>
        <div class="item" style="width: 116px">
          <el-checkbox
            v-model="kckhColumnChecked"
            @change="selectCheck('kckh')"
          ></el-checkbox>
          <div>
            <div>课程考核</div>
            <div>实施计划</div>
          </div>
        </div>
        <div class="item" style="width: 119px">
          <el-checkbox
            v-model="mtjhColumnChecked"
            @change="selectCheck('mtjh')"
          ></el-checkbox
          >
          <span>命题计划</span>
        </div>
        <div class="item" style="width: 136px">
          <el-checkbox
            v-model="kcdjbColumnChecked"
            @change="selectCheck('kcdjb')"
          ></el-checkbox
          >
          <span>考场登记表</span>
        </div>
        <div class="item" style="width: 111px">
          <el-checkbox
            v-model="sycpColumnChecked"
            @change="selectCheck('sycp')"
          ></el-checkbox
          >
          <span>送印传票</span>
        </div>
        <div class="item" style="width: 124px">
          <el-checkbox
            v-model="sjdfpColumnChecked"
            @change="selectCheck('sjdfp')"
          ></el-checkbox
          >
          <span>试卷袋封皮</span>
        </div>
        <div class="item" style="width: 101px">
          <el-checkbox
            v-model="abjColumnChecked"
            @change="selectCheck('abj')"
          ></el-checkbox
          >
          <span>AB卷</span>
        </div>
        <div class="item" style="width: 155px">
          <el-checkbox
            v-model="daColumnChecked"
            @change="selectCheck('da')"
          ></el-checkbox
          >
          <span>答案及评分标准</span>
        </div>
        <div class="item" style="width: 116px">
          <el-checkbox
            v-model="dtjColumnChecked"
            @change="selectCheck('dtj')"
          ></el-checkbox
          >
          <span>答题卷</span>
        </div>
        <div class="item" style="width: 145px">
          <el-checkbox
            v-model="ksfxbColumnChecked"
            @change="selectCheck('ksfxb')"
          ></el-checkbox
          >
          <span>试卷分析表</span>
        </div>
        <div class="item" style="width: 131px">
          <el-checkbox
            v-model="zpcjdColumnChecked"
            @change="selectCheck('zpcjd')"
          ></el-checkbox
          >
          <span>总评成绩单</span>
        </div>
      </div>
      <div class="table-body" v-for="(item, index) in tableData" :key="index">
        <div class="item" style="width: 67px">
          <el-checkbox
            v-model="item.rowChecked"
            @change="itemChange('row',index)"
          ></el-checkbox>
        </div>
        <div class="item" style="width: 97px">{{ item.courseno }}</div>
        <div class="item" style="width: 106px">{{ item.coursename }}</div>
        <div class="item" style="width: 114px">{{ item.coursecharge }}</div>
        <div class="item" style="width: 123px">
          <el-checkbox
            v-model="item.sjcfmChecked"
            @change="itemChange('sjcfm',index)"
          ></el-checkbox
          >
          <el-button class="item_btn" @click="itemClick('sjcfm',index)">预览</el-button>
        </div>
        <div class="item" style="width: 116px">
          <el-checkbox v-model="item.kckhChecked" @change="itemChange('kckh',index)"></el-checkbox>
          <el-button class="item_btn" @click="itemClick('kckh',index)">预览</el-button>
        </div>
        <div class="item" style="width: 119px">
          <el-checkbox v-model="item.mtjhChecked" @change="itemChange('mtjh',index)"></el-checkbox
          >
          <el-button class="item_btn" @click="itemClick('mtjh',index)">预览</el-button>
        </div>
        <div class="item" style="width: 136px">
          <el-checkbox v-model="item.kcdjbChecked" @change="itemChange('kcdjb',index)"></el-checkbox
          >
          <el-button class="item_btn" @click="itemClick('kcdjb',index)">预览</el-button>
        </div>
        <div class="item" style="width: 111px">
          <el-checkbox v-model="item.sycpChecked" @change="itemChange('sycp',index)"></el-checkbox
          >
          <el-button class="item_btn" @click="itemClick('sycp',index)">预览</el-button>
        </div>
        <div class="item" style="width: 124px">
          <el-checkbox v-model="item.sjdfpChecked" @change="itemChange('sjdfp',index)"></el-checkbox
          >
          <el-button class="item_btn" @click="itemClick('sjdfp',index)">预览</el-button>
        </div>
        <div class="item" style="width: 101px">
          <el-checkbox v-model="item.abjChecked" @change="itemChange('abj',index)"></el-checkbox>
          <el-button class="item_btn" @click="itemClick('abj',index)">预览</el-button>
        </div>
        <div class="item" style="width: 155px">
          <el-checkbox v-model="item.daChecked" @change="itemChange('da',index)"></el-checkbox>
          <el-button class="item_btn" @click="itemClick('da',index)">预览</el-button>
        </div>
        <div class="item" style="width: 116px">
          <el-checkbox v-model="item.dtjChecked" @change="itemChange('dtj',index)"></el-checkbox>
          <el-button class="item_btn" @click="itemClick('dtj',index)">预览</el-button>
        </div>
        <div class="item" style="width: 145px">
          <el-checkbox v-model="item.ksfxbChecked" @change="itemChange('ksfxb',index)"></el-checkbox
          >
          <el-button class="item_btn" @click="itemClick('ksfxb',index)">预览</el-button>
        </div>
        <div class="item" style="width: 131px">
          <el-checkbox v-model="item.zpcjdChecked" @change="itemChange('zpcjd',index)"></el-checkbox
          >
          <el-button class="item_btn" @click="itemClick('zpcjd',index)">预览</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getDownload, getLine, getSelectConditionPrint} from "@/api/paperPrint/paperPrint";


export default {
  data() {
    return {
      course: "",
      xq: "2021春",
      xqList: [
        {
          value: "2021春",
          label: "2021春",
        },
        {
          value: "2021夏",
          label: "2021夏",
        },
      ],
      level: "",
      ppccList: [
        {
          value: "大专",
          label: "大专",
        },
        {
          value: "本科",
          label: "本科",
        },
      ],
      xxtype: "",
      xxlxList: [
        {
          value: "选修",
          label: "选修",
        },
        {
          value: "必修",
          label: "必修",
        },
      ],
      kcfzr: "",
      kcfzrList: [
        {
          value: "李丽",
          label: "李丽",
        },
        {
          value: "万万",
          label: "万万",
        },
      ],
      rowColumnChecked: false,
      sjcfmColumnChecked: false,
      kckhColumnChecked: false,
      mtjhColumnChecked: false,
      kcdjbColumnChecked: false,
      sycpColumnChecked: false,
      sjdfpColumnChecked: false,
      abjColumnChecked: false,
      daColumnChecked: false,
      dtjColumnChecked: false,
      zpcjdColumnChecked: false,
      ksfxbColumnChecked: false,
      coursecharge: '',
      tableData: [],
      filepath: "",
    };
  },
  created() {
    this.querySelPrint();
  },
  watch: {
    rowColumnChecked: {
      deep: true,
      handler() {
        this.tableData = this.tableData.map((item) => {
          return {...item, rowChecked: this.rowColumnChecked};
        });
      }
    },
  },
  methods: {
    exportClick() {
      let Base64 = require('js-base64').Base64;
      let arr = []

      for (const tableKey in this.tableData) {
        let obj = {}
        let table = this.tableData[tableKey]
        obj.id = table.id
        obj.sjcfmChecked = table.sjcfmChecked ? table.sjcfmChecked : false;
        obj.kckhChecked = table.kckhChecked ? table.kckhChecked : false;
        obj.kckhssjhChecked = table.kckhssjhChecked ? table.kckhssjhChecked : false;
        obj.mtjhChecked = table.mtjhChecked ? table.mtjhChecked : false;
        obj.kcdjbChecked = table.kcdjbChecked ? table.kcdjbChecked : false;
        obj.sycpChecked = table.sycpChecked ? table.sycpChecked : false;
        obj.sjdfpChecked = table.sjdfpChecked ? table.sjdfpChecked : false;
        obj.abjChecked = table.abjChecked ? table.abjChecked : false;
        obj.daChecked = table.daChecked ? table.daChecked : false;
        obj.dtjChecked = table.dtjChecked ? table.dtjChecked : false;
        obj.sjfxbChecked = table.sjfxbChecked ? table.sjfxbChecked : false;
        obj.ksfxbChecked = table.ksfxbChecked ? table.ksfxbChecked : false;

        obj.zpcjdChecked = table.zpcjdChecked ? table.zpcjdChecked : false;
        arr.push(obj)

      }
      let obj1 = JSON.stringify(arr)
      console.log(obj1)
      let str = Base64.encode(obj1)
      console.log(str)
      // http://localhost:4444/materialDownload/download
      let href = window._CONFIG.previewurl + `/materialDownload/download?str=${str}`;

      window.open(href, '_blank');

    },
    querySelPrint() {
      let obj = {
        xueqi: this.xq,
        level: this.level,
        xxtype: this.xxtype,
        status: this.status,
        coursecharge: this.coursecharge
      }
      let el = this
      // this.tableData = [{id:'11'},{id:'33'}]
      return new Promise(() => {
        getSelectConditionPrint(obj).then(res => {
          this.tableData = res.data.data
        })
      })

    },
    itemChange(string, index) {
      let arr = ["sjcfm", "kckh", "mtjh", "kcdjb", "sycp",
        "sjdfp", "abj", "da", "dtj", 'ksfxb', "zpcjd"]
      let obj = this.tableData[index]
      this[string + "ColumnChecked"] = this.tableData.every((item) => {
        return item[string + "Checked"];
      });
      if (string === "row") {
        console.log(obj)
        let isflag = obj[string + "Checked"]

        for (const arrKey in arr) {
          obj[arr[arrKey] + "Checked"] = isflag
          this[arr[arrKey] + "ColumnChecked"] = this.tableData.every((item) => {
            return item[arr[arrKey] + "Checked"];
          });
        }
      } else {
        for (const arrKey in arr) {
          if (!obj[arr[arrKey] + 'Checked']) {
            obj['rowChecked'] = false
            this.rowColumnChecked = false
            return
          } else {
            obj['rowChecked'] = true
            this.rowColumnChecked = true
          }
        }
      }
      console.log(string + "ColumnChecked")
      console.log(string + "Checked")

    },
    itemClick(position, index) {
      console.log(position, index)
      let id = this.tableData[index].id
      if (position === 'abj') {
        this.blankckck('abja', id, "blank1")
        this.blankckck('abjb', id, "blank2")
      } else {
        // http://localhost:4444/materialDownload/line
        this.blankckck(position, id, "blank")
      }

    },
    blankckck(position, id, blank) {
      let href = window._CONFIG.previewurl + `/materialDownload/line?id=${id}&position=${position}`;
      // window.location.href=href;
      window.open(href, blank);
    },
    selectCheck(choose) {
      let arr = ["sjcfm", "kckh", "mtjh", "kcdjb", "sycp",
        "sjdfp", "abj", "da", "dtj", 'ksfxb', "zpcjd"]
      if (choose) {
        if (choose === "all") {
          let isflag = this["rowColumnChecked"]

          for (const arrKey in arr) {
            this[arr[arrKey] + "ColumnChecked"] = isflag
            this.tableData = this.tableData.map((item) => {
              return {
                ...item,
                [arr[arrKey] + "Checked"]: this[arr[arrKey] + "ColumnChecked"],
              };
            });
          }
          this.tableData = this.tableData.map((item) => {
            return {...item, rowChecked: this.rowColumnChecked};
          });

        } else {
          for (const arrKey in arr) {
            this.tableData = this.tableData.map((item) => {
              return {
                ...item,
                [choose + "Checked"]: this[choose + "ColumnChecked"],
              };
            });
            if (!this[arr[arrKey] + 'ColumnChecked']) {
              this.rowColumnChecked = false

              for (const Key in this.tableData) {
                this.tableData[Key]['rowChecked'] = false
              }

              return
            } else {
              this['rowColumnChecked'] = true

            }

          }

        }
      }
    },
    changeInputFile() {
      document.getElementById("theFile").click();
      document.getElementById("theFile").onchange = (event) => {
        this.filepath = event.target.value;
      };
    },
  },
};
</script>

<style lang="less" scoped>
.item_btn {
  width: 55px;
  height: 28px;
  line-height: 28px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.pagination-block {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.paperprint-container {
  .el-checkbox__inner:hover {
    border-color: #004ca7;
  }

  .el-checkbox__inner {
    border: 1px solid #004ca7;
    border-radius: 0;
  }

  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #004ca7;
    border-color: #004ca7;
  }

  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #004ca7;
  }

  .el-checkbox.is-bordered.is-checked {
    border-color: #004ca7;
  }

  .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #004ca7;
  }

  .export-report-container {
    .el-dialog__body {
      padding: 64px 0 64px 50px;

      .el-radio {
        margin-right: 79px;
      }
    }

    .el-dialog__footer {
      padding-bottom: 103px;
    }
  }

  .import-report-container {
    .el-dialog__body {
      padding-left: 165px;
      padding-top: 71px;
      padding-bottom: 60px;

      > div {
        > span {
          font-size: 18px;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          vertical-align: middle;
        }

        > input {
          width: 254px;
          height: 25px;
          border: 1px solid #004ca7;
          opacity: 1;
          border-radius: 4px;
          padding-left: 5px;
          margin-right: 8px;
          color: #004ca7;
          vertical-align: middle;
        }

        > div {
          display: inline-block;
          font-size: 18px;
          padding: 1px 10px;
          border-radius: 4px;
          vertical-align: middle;
          cursor: pointer;

          &:nth-child(3) {
            color: rgba(2, 200, 108, 1);
            background: #f1fff8;
            border: 1px solid #02c86c;
            position: relative;
            margin-right: 20px;

            > input {
              width: 0px;
              position: absolute;
              left: 0;
              opacity: 1;
              cursor: pointer;
            }
          }

          &:nth-child(4) {
            color: rgba(82, 48, 233, 1);
            background: rgba(235, 230, 255, 1);
            border: 1px solid rgba(82, 48, 233, 1);
          }
        }
      }
    }

    .el-dialog__footer {
      padding-bottom: 76px;

      .green {
        padding: 1px 17px;
      }
    }
  }
}
</style>
<style lang="less" scoped>
@import "../../../styles/paper-print.less";
</style>
